<template>
	<view class="app">
		<view class="head">
			<view class="head_one">
				<view>
					<uni-icons type="left" size="30"></uni-icons>
				</view>
				<view>故宫博物馆</view>
				<view>
					<uni-icons type="redo" size="30"></uni-icons>
				</view>
			</view>
			<view class="head_two">
				<view class="head_two_right">
					景点相册
				</view>
				<view class="head_two_left">
					游客评论
				</view>
			</view>
			<view class="head_three">
				<!-- <view class="head_three_all">
					全部 5648
				</view>
				<view class="head_three_img">
					视频/图片 1607
				</view>
				<view class="head_three_goods">
					好评 522223
				</view>
				<view class="head_three_new">
					最新
				</view> -->
				<view class="button-container head_three">
					<view v-for="(button, index) in buttons" :key="index" :class="['button', { active: button.active }]"
						@click="toggleButton(index)">
						{{ button.label }}
					</view>
				</view>



			</view>
		</view>
		<view class="main">
			<view class="main_box">
				<view class="main_box_top">
					<view class="" style="display: flex;">
						<view class="main_box_top_header">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<p>横****笑</p>
							<p>2098-10-25 来自辽宁</p>
						</view>
					</view>

					<view class="zan">
						<uni-icons type="hand-up" size="25">
						</uni-icons>
						<!-- <span style="size: 15rpx;">32</span> -->
					</view>
				</view>
				<view class="main_box_bot">
					<p>
						故宫规模之大，建筑之多，一排排红一墙金顶的建筑整齐排列，倘若登在高处由南向北远眺俯视，更能让人感觉到它的气势宏伟。在中国乃至世界
					</p>
					<view class="img_main">
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

			<view class="main_box">
				<view class="main_box_top">
					<view class="" style="display: flex;">
						<view class="main_box_top_header">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<p>横****笑</p>
							<p>2098-10-25 来自辽宁</p>
						</view>
					</view>

					<view class="zan">
						<uni-icons type="hand-up" size="25">
						</uni-icons>
						<span style="size: 15rpx;">32</span>
					</view>
				</view>
				<view class="main_box_bot">
					<p>
						故宫规模之大，建筑之多，一排排红一墙金顶的建筑整齐排列，倘若登在高处由南向北远眺俯视，更能让人感觉到它的气势宏伟。在中国乃至世界
					</p>
					<view class="img_main">
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="main_box">
				<view class="main_box_top">
					<view class="" style="display: flex;">
						<view class="main_box_top_header">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<p>横****笑</p>
							<p>2098-10-25 来自辽宁</p>
						</view>
					</view>

					<view class="zan">
						<uni-icons type="hand-up" size="25">
						</uni-icons>
						<span style="size: 15rpx;">32</span>
					</view>
				</view>
				<view class="main_box_bot">
					<p>
						故宫规模之大，建筑之多，一排排红一墙金顶的建筑整齐排列，倘若登在高处由南向北远眺俯视，更能让人感觉到它的气势宏伟。在中国乃至世界
					</p>
					<view class="img_main">
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
						<view class="">
							<image src="/static/c1.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="footer">
			<view @click='gofabiaojingdian' class="write">
				<i>@</i>&nbsp;
				<input type="text" name="" id="" placeholder="写评论...">
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		useRouter
	} from 'vue-router';
	import {
		ref
	} from 'vue';

	const buttons = ref([{
			label: '全部 5648',
			active: false
		},
		{
			label: '视频/图片 1607',
			active: false
		},
		{
			label: '好评 522223',
			active: false
		},
		{
			label: '最新',
			active: false
		}
	]);

	function toggleButton(index) {
		// 重置所有按钮的状态
		buttons.value.forEach((button, idx) => {
			button.active = idx === index;
		});
	}
	const router = useRouter();

	//跳转
	function gofabiaojingdian() {
		router.push({
			path: '/pages/index/fabiaojingdianpinglun' // 页面路径，必须以 '/' 开头
		});
	}
</script>

<style scoped lang="less">
	.button-container {
		border: none;
		display: flex;
		justify-content: space-around;
		width: 100%;
	}

	.button {
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s, color 0.3s;
	}

	.button.active {
		background-color: rgba(220, 240, 246, 1);
		color: #3478F6;
		border: none;
	}

	.button:not(.active) {
		background-color: rgba(234, 240, 246, 1);
		color: black;
		border: none;
	}

	/*  */
	.zan {
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.write input {
		width: 100%;
		height: 100%;
	}

	.main_box_top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main_box_bot {
		margin-top: 10px;
	}

	.main_box_top_header {
		width: 50px;
		height: 50px;
		margin-right: 5px;
	}

	.main_box_top_header image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #eee;
	}

	.main_box {
		width: 100%;
		border-bottom: 1px solid #eee;
		margin: 10px 0px 30px 0px;
		/* background-color: pink; */
	}

	.img_main view {
		width: 33%;

		image {
			width: 100%;
			height: 100%;
			background-color: aqua;
			border-radius: 15px;
		}
	}

	.img_main {
		width: 100%;
		height: 150px;
		display: flex;
		justify-content: space-around;
		margin: 10px 0px 10px 0px;
	}

	li {
		list-style: none;
	}

	.app {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;

	}

	.head {
		width: 100%;
		line-height: 30px;
	}

	.head_one {
		padding: 10px;
		/* width: 100%; */
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.head_two_right,
	.head_two_left {
		width: 50%;
		text-align: center;
	}

	.head_two_left {
		border-bottom: 1px solid blue;
	}

	.head_two {
		/* width: 100%; */
		display: flex;
		border-bottom: 1px solid #eee;

	}

	.head_three {
		font-size: 25rpx;
		padding: 15rpx 10rpx 15rpx 10rpx;
		/* width: 100%; */
		border: none;
		display: flex;
		justify-content: space-between;
		border-bottom: 3rpx solid #eee;
	}

	.head_three view {
		border-radius: 35rpx;
		/* background: #eee; */
		padding: 10rpx;
		border: none;
		/* background-color: rgba(234, 240, 246, 1); */
	}

	.main {
		flex: 1;
		overflow-y: auto;
		padding: 10px;
	}

	.footer {
		width: 100%;
		/* background-color: pink; */
	}

	.write {
		margin: 10px;
		padding: 10px;
		display: flex;
		background-color: #eee;
		border-radius: 35px;
	}
</style>